<template>
  <el-dialog title="协查人员详细信息" :visible.sync="visible" :modal-append-to-body="true" :append-to-body="true" :custom-class="dialogClass" @open="dialogOpen" @close="closeEvent">
    <div class="page-con">

      <div class="person-detail__con">
        <xdh-layout :east="{width: '250px'}" :west="{width: 'calc(100% - 250px)'}">
          <div class="person-info" slot="west">
            <el-form :inline="true" :model="formData" class="form-inline" :label-width="'200px'">
              <el-form-item v-for="(item, idx) in formDataList" :key="idx" :label="item.label" :style="!showFeedback ? 'min-width:50%': ''">
                <span class="value">{{item.value}}</span>
              </el-form-item>
            </el-form>
          </div>
          <div class="image" slot="east">
            <img :src="headImg" class="img" v-if="!imageError" @error="imageError = true"/>
            <img :src="defaultImg" class="defaultimg" v-if="imageError"/>
          </div>
        </xdh-layout>
      </div>
      <xdh-list-panel v-if="showFeedback" :load="loadData" :state="state" :is-auto="false" fit ref="listPanel" title="反馈历史" style="margin-top: 15px;">
        <template slot-scope="scope">
          <el-table :data="state.list" border stripe :height="scope.height" selectable @selection-change="selectionChange">
            <el-table-column type="index" :label="'序号'" :index="calcIndex" :width="50">
            </el-table-column>
            <el-table-column label="下发人" prop="createUser">
              <template slot-scope="scope">
                {{scope.row.checkTask.createUser}}
              </template>
            </el-table-column>
            <el-table-column label="下发时间" prop="createTime" sortable>
              <template slot-scope="scope">
                {{scope.row.createTime | dateFormat}}
              </template>
            </el-table-column>
            <el-table-column label="反馈人" prop="feedbackUser">
              <template slot-scope="scope">
                {{scope.row.feedbackUser}}
              </template>
            </el-table-column>
            <el-table-column label="反馈时间" prop="feedbackTime" sortable>
              <template slot-scope="scope">
                {{scope.row.feedbackTime | dateFormat}}
              </template>
            </el-table-column>
            <el-table-column label="境内居住地派出所" prop="feedbackTime" sortable>
              <template slot-scope="scope">
                {{scope.row.workunit === 1 ? scope.row.policeUnit: '' }}
              </template>
            </el-table-column>
            <el-table-column label="境内工作地派出所" prop="feedbackTime" sortable>
              <template slot-scope="scope">
                {{scope.row.workunit === 0 ? scope.row.policeUnit: '' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" :width="180" fixed="right">
              <template slot-scope="scope">
                <el-button @click="view(scope.row)" type="default" size="mini">
                  <i class="iconfont icon-visible"></i>
                  查看</el-button>
                <!-- <el-button type="primary" size="mini" @click="download(scope.row)" v-if="status!=='notFeedback'&& !scope.row.handlePermission.onlyView">
                                        <i class="iconfont icon-share"></i>
                                  下载</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </template>
      </xdh-list-panel>
    </div>
    <feedback-detail :visible="feedbackDialog" :feedback-id="feedbackId" :mode="'view'" :row-data="rowData" @close="feedbackDialog = false"></feedback-detail>
  </el-dialog>
</template>
<script>
  import XdhLayout from '@/widgets/xdh-layout';
  import XdhListPanel from '@/widgets/xdh-list-panel';
  import FeedbackDetail from './feedbackDetail';
  import taskMixin from '@/base/mixin/fvisas';
  import checkfeedbacksMixin from '@/base/mixin/checkfeedbacks';
  import date from '@/utils/date';
  import { DEPLOY_SUB_DIR } from '@/config';
  export default {
    mixins: [taskMixin, checkfeedbacksMixin],
    components: {
      XdhLayout,
      XdhListPanel,
      FeedbackDetail
    },
    props: {
      visible: {
        type: Boolean
      },
      rowData: {
        type: Object,
        default() {
          return {};
        }
      },
      showFeedback: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        rowId: '',
        feedbackId: '',
        feedbackDialog: false,
        state: {
          total: 0,
          list: []
        },
        headImg: '',
        imageError: false,
        defaultImg: '/' + DEPLOY_SUB_DIR + 'static/img/head.png',
        formMap: {
          国家地区: 'ccountry',
          姓名: 'enname',
          性别: 'csex',
          出生日期: 'birthday',
          联系电话: 'telephone',
          现持证件号码: 'passno',
          所持证件有效期至: '',
          接待单位名称: 'cinviunit',
          申请签证种类: 'csigntype',
          申请事由: 'centrresn',
          '签证/居留许可号码': 'signno',
          签发日期: 'signdate',
          有效期至: 'signvali',
          境内居住地行政区划: 'caddrareacode',
          境内居住地派出所: 'caddrpolicecode',
          境内居住地详细地址: 'address',
          工作单位所在地派出所: 'cworkpolice',
          工作单位所在地详细地址: 'workaddr',
          工作单位服务处所电话: '',
          办证类别: '',
          境外人员类别: '',
          身份: ''
        },
        formDataList: [],
        pageInfo: {
          page: 1,
          limit: 20
        }
      };
    },
    filters: {
      dateFormat(val) {
        if (!val) {
          return '-';
        }
        return date(new Date(parseInt(val)), 'yyyy-MM-dd');
      }
    },
    computed: {
      dialogClass() {
        if (this.showFeedback) {
          return 'person-detail fix';
        } else {
          return 'person-detail';
        }
      }
    },
    methods: {
      calcIndex(index) {
        return index + (this.pageInfo.page - 1) * this.pageInfo.limit + 1;
      },
      dialogOpen() {
        this.$nextTick(r => {
          this.reset();
          if (this.rowData && this.rowData.pkValue) {
            this.rowId = this.rowData.pkValue;
            var arr = [];
            for (let name in this.formMap) {
              let val = this.rowData[this.formMap[name]] || '';
              if (
                ['出生日期', '签发日期', '有效期至', '所持证件有效期至'].includes(
                  name
                )
              ) {
                val = this.dateFormat2(val, 'yyyy-MM-dd');
              }
              arr.push({
                label: name,
                value: val
              });
            }
            this.formDataList = arr;
            this.headImg = '/static/img/head.jpg';
            if (this.showFeedback && this.$refs.listPanel) {
              this.$refs.listPanel.reload();
            }
          }
        });
      },
      dateFormat2(val) {
        if (!val) {
          return '-';
        }
        let y = val.slice(0, 4);
        let m = parseInt(val.slice(4, 6)) - 1;
        let d = val.slice(6, 8);
        return date(new Date(y, m, d), 'yyyy-MM-dd');
      },
      reset() {
        this.formDataList = [];
        this.imageError = false;
      },
      closeEvent() {
        this.$emit('close');
      },
      loadData(page, limit) {
        let postData = { pkValue: this.rowId };
        if (this.$route.path.includes('/task-feedback')) {
          // 派出所页面，通过任务id查找
          postData.type = 1;
        } else if (this.$route.path.includes('/task-manage')) {
          // 出入境页面，通过外国人id查找
          postData.type = 0;
        }
        let query = Object.assign({}, postData, {
          page: page,
          limit: limit
        });
        return this.fetchCheckfeedbacks(query).then(res => {
          this.state = res;
        });
      },
      view(row) {
        this.feedbackDialog = true;
        this.feedbackId = row.pkValue;
      },
      download(row) {}
    }
  };
</script>

<style type="text/scss" lang="scss">
  .person-info {
    .el-form--inline .el-form-item {
      min-width: 30%;
      margin-bottom: 0;
      margin-right: 0;
    }
    .el-form-item {
      .el-form-item__label {
        font-size: 15px;
        font-weight: bold;
        line-height: 35px;
        &:after {
          content: ':';
        }
      }
      .el-form-item__content {
        font-size: 15px;
        line-height: 35px;
      }
    }
  }
  .el-dialog.person-detail {
    margin: 1% !important;
    width: 98%;
    max-height: 96%;
    &.fix {
      height: 96%;
    }
    .el-dialog__body {
      height: calc(100% - 60px);
      box-sizing: border-box;
    }
    .page-con {
      height: 100%;
      display: flex;
      flex-flow: column;
    }
  }
</style>
<style  type="text/scss" lang="scss" scoped>
  .image img {
    width: 175px;
    height: 230px;
  }
</style>